{% extends 'base.html.twig' %}

{% block stylesheets %}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/indexbg.jpg") }}?v=1') no-repeat top center;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
    }
    .btnstart { display: block; width: 214px; position: absolute; bottom: 100px; right: 0; }
    .btnstart img {  width: 214px; }
    .btn-wrapper { position:absolute; bottom: 50px; width: 100%; }
    .btn-wrapper .btns { margin: 0 auto; width: 200px; }
    .btn-wrapper .btn { display: block; width: 90px; }
    .btn1 { float: left; }
    .btn2 { float: right; }
    .btn img { width: 100%; }
    
    @media all and (max-height: 460px) {
        .btn-wrapper { bottom: 30px; }
    }
    @media all and (max-height: 420px) {
        .btnstart {
            bottom: 60px;
            right: -30px;
            transform: scale3d(0.8, 0.8, 1);
            -webkit-transform: scale3d(0.8, 0.8, 1);
        }
        .btnstart img {  width: 180px; }
        .btn-wrapper { 
            bottom: 20px; 
            transform: scale3d(0.9, 0.9, 1);
            -webkit-transform: scale3d(0.9, 0.9, 1);
        }
    }
</style>
{% endblock %}

{% block body %}
    <a class='btnstart' href='{{ urlFor("game") }}'><img src='{{ imgsrc("images/btnindex.png") }}?v=1'></a>
    <div class='btn-wrapper'>
        <div class='btns clearfix'>
            <a class='btn btn1' href='{{ urlFor("rule")}}'><img src='{{ imgsrc("images/btnrule.png") }}'></a>
            <a class='btn btn2' href='{{ urlFor("draw")}}'><img src='{{ imgsrc("images/btnlook.png") }}'></a>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
{{ js('js/velocity.ui.min.js') }}
<script>

$(function(){
    $('#body').css('height', h + 'px');
    setInterval(function(){
        $('.btnstart').velocity('callout.swing');
    }, 3000);
    
});
</script>
{% endblock %}